<template>
    <div id="app">
        <router-view/>
        <tabbar>
            <tabbar-item selected link="/">
                <img slot="icon" src="./assets/主页.png">
                <img slot="icon-active" src="./assets/zhuye2.png">
                <span  slot="label">首页</span>
            </tabbar-item>
            <tabbar-item  link="/inform">
                <img slot="icon" src="./assets/喇叭1.png">
                <img slot="icon-active" src="./assets/喇叭.png">
                <span  slot="label">头条</span>
            </tabbar-item>
            <tabbar-item link="/photo">
                <img slot="icon" src="./assets/图片.png">
                <img slot="icon-active" style="height: 24px;" src="./assets/图片1.png">
                <span  slot="label">摄影</span>
            </tabbar-item>
            <tabbar-item  link="/mine">
                <img slot="icon" src="./assets/我的.png">
                <img slot="icon-active" src="./assets/我的1.png">
                <span  slot="label">我的</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
    import bus from './js/bus.js'
    import {Tabbar, TabbarItem,} from 'vux'
    export default {
        name:'App',
        components:{
            Tabbar,
            TabbarItem
        },
        mounted(){
            bus.$on('hidden',function () {
                $('.weui-tabbar ').hide()
            })
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        padding-bottom: 20vw;
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .weui-tabbar {
        position: fixed !important;
        bottom: 0;
        z-index: 999;
        width: 100vw!important;
    }
    html,body{
        margin: 0;
        padding: 0;
    }
</style>
